<template>

	<!-- 	<view v-if="!userInfo.loginToken">
		没数据{{pageData.id}}
	</view> -->

	<view :class="{
		'my-box-1': !LoginStatus,
		'my-box':true
}">
		<view class="my-box-t">
			<image style="width: 100%;height: 100%;" :src="images.myBg"></image>
			<view class="box">
				<MyUpData :data="pageData.avatarUrl"></MyUpData>




				<!-- 名字 -->
				<view class="box-r">

					<view class="name">
						<text>{{userInfo.nickName}}</text>
						<view v-if="addressShow" class="status"
							:class="'status' + (addressShow && userInfo.userArtistVo.serviceStatus)"
							@tap="show2 = true">
							<text>{{addressShow && userInfo.userArtistVo.serviceStatus | statusName}}</text>
							<image style="margin-left: 4rpx;width: 16rpx;height: 16rpx;"
								src="/static/images/rightIcon3.png"></image>
						</view>
					</view>

					<view class="service-box" v-if="addressShow">
						<view class="main">
							<image src="/static/images/scoreIcon.png"></image>
							<text
								style="font-size: 26rpx; white-space: nowrap;">{{`评分 ${pageData.evaluateLevel || '5.0'}`}}</text>
						</view>
						<text
							style="color: #8C8A8A;margin-left: 20rpx;font-size: 24rpx; white-space: nowrap;">{{`服务时间：${userInfo.userArtistVo.serviceStartTime.slice(0, userInfo.userArtistVo.serviceStartTime.length - 3)}~${userInfo.userArtistVo.serviceEndTime.slice(0, userInfo.userArtistVo.serviceEndTime.length - 3)}`}}</text>
					</view>

					<view class="tag-box"
						v-if="userArtistVoType && ( pageData.userArtistVo.age || pageData.userArtistVo.height || pageData.userArtistVo.weight)">
						<text>{{`${pageData.userArtistVo.age}岁`}}</text>
						<text>{{`${pageData.userArtistVo.height}cm`}}</text>
						<text>{{`${pageData.userArtistVo.weight}kg`}}</text>
					</view>


				</view>
			</view>

			<!-- 用户id -->
			<view class="my-box-t-userId" @click="setAffixUserId">
				<text class="my-box-t-userId-text1">推广ID:</text>
				<text class="my-box-t-userId-text2">{{" " + pageData.id}}</text>
			</view>

			<!-- 编辑资料 -->
			<view class="editMsg" @click="enterEditMsg">
				修改资料
			</view>


		</view>


		<view class="my-box-c">
			<view class="box" @tap="handleNavigateTo('/pages/order/index')">
				<image src="/static/images/reservationIcon.png"></image>
				<text>预约订单</text>
			</view>


			<!-- 艺人展示的 -->
			<view v-if="userArtistVoType" class="box" @tap="handleNavigateTo('/pages/me/artistSignUp/artistSignUp')">
				<image src="/static/images/icon-signUp.png"></image>
				<text>我的报名</text>
			</view>

			<!-- 艺人-我的预约 -->
			<view v-if="userArtistVoType" class="box" @tap="handleNavigateTo('/pages/me/artistAppoint/artistAppoint')">
				<image src="/static/images/icon-subscribe.png"></image>
				<text>预约我的</text>
			</view>


			<view class="box" @tap="handleNavigateTo('/pages/order/cityOrder/index')">
				<image src="/static/images/cityparty3.png"></image>
				<text>我的组局</text>
			</view>
			<view class="box" @tap="handleNavigateTo('/pages/wallet/coupons')">
				<image src="/static/images/coupons.png"></image>
				<text>我的卡券</text>
			</view>

			<view class="box" @tap="handleNavigateTo('/pages/artist/follow')">
				<image src="/static/images/followIcon1.png"></image>
				<text>我的关注</text>
			</view>
		</view>
		<view class="my-box-b">
			<text class="title">工具与服务</text>
			<view class="main">
				<view class="box" @tap="handleNavigateTo('/pages/wallet/withdrawal/withdrawal')">
					<image src="/static/images/walletIcon.png"></image>
					<text>我的钱包</text>
				</view>
				<view class="box" @tap="handleNavigateTo('/pages/wallet/recharge')">
					<image src="/static/images/recharge.png"></image>
					<text>会员充值</text>
				</view>
				<view class="box" @tap="handleCertification()">
					<image src="/static/images/smrzIcon.png"></image>
					<text>{{pageData.isCertification===0 ? '待实名' : '已实名' }}</text>
				</view>
				<view v-if="!userArtistVoType" class="box" @tap="handleNavigateTo('/pages/artist/join/join')">
					<image src="/static/images/icon-joinIn.png"></image>
					<text>艺人加盟</text>
				</view>
				<view class="box" @tap="handleNavigateTo('/pages/me/share')">
					<image src="/static/images/shareIcon.png"></image>
					<text>分享好友</text>
				</view>
				<view class="box" @tap="handleNavigateTo('/pages/artist/partner')">
					<image src="/static/images/partnerIcon.png"></image>
					<text>合作伙伴</text>
				</view>
				<view class="box" v-if="addressShow" @tap="editAddress">
					<image src="/static/images/dizhiIcon.png"></image>
					<text>我的地址</text>
				</view>
				<view class="box" v-if="addressShow" @tap="show = true">
					<image src="/static/images/timeIcon.png"></image>
					<text>服务时间</text>
				</view>
				<view class="box" @tap="show1 = true">
					<image src="/static/images/feedbackIcon.png"></image>
					<text>反馈建议</text>
				</view>
				<view class="box" @tap="handleCall()">
					<image src="/static/images/lxIcon.png"></image>
					<text>联系客服</text>
				</view>
				<view class="box" @tap="handleNavigateTo('/pages/me/about')">
					<image src="/static/images/guanyuIcon.png"></image>
					<text>关于我们</text>
				</view>
				<view v-if="artistCenterShow" class="box" @click="enterArtistManage()">
					<image src="/static/images/yi-ren-guan-li-icon.png"></image>
					<text>艺人中心</text>
				</view>

			</view>
		</view>
		<view class="exit-box" @tap="handlecccc">退出登录</view>


		<u-modal :show="show3" :showCancelButton="true" cancelText="取消" confirmText="保存" :closeOnClickOverlay="true"
			@close="() => {show3 = false}" @cancel="() => {show3 = false}" @confirm="handleConfirm1">
			<view class="slot-content">
				<view style="font-size: 28rpx;margin-bottom: 20rpx;">
					<text style="font-weight: bold;">特别说明:</text>
					您设置的地理位置信息不会暴露给用户,仅用于基于位置算法推荐。
				</view>
				<liu-chooseAddress ref="liuChooseAddress" :propsTitle="propsTitle" :PropsAddress="PropsAddress" :propsLoading="false"
					:cityCode="addressShow && pageData.userArtistVo.cityCode" :isDizhi="true" @submit="submitAddress">
				</liu-chooseAddress>
			</view>
		</u-modal>

		<u-modal :show="show1" title="请留下您宝贵的建议" :showCancelButton="true" cancelText="取消" :closeOnClickOverlay="true"
			@close="() => {xxx = '';show1 = false}" @cancel="() => {xxx = '';show1 = false}" @confirm="handleConfirm">
			<view class="slot-content">
				<u--textarea v-model.trim="xxx" focus placeholder="请留下你宝贵的建议" placeholderStyle="color:#8C8A8A;">
				</u--textarea>
			</view>
		</u-modal>

		<!-- 服务状态选择 -->
		<u-action-sheet round=40 @select="handleSelect" :actions="serviceStatusList" cancelText="取消"
			:closeOnClickOverlay="true" :safeAreaInsetBottom="true" :closeOnClickAction="true" :show="show2"
			@close="show2 = false">
		</u-action-sheet>

		<!-- 服务时间选择 -->
		<u-picker :show="show" itemHeight='60' :defaultIndex="hourIndex" :closeOnClickOverlay="true" :columns="hourList"
			@close="show = false" @cancel="show = false" @confirm="handleHour"></u-picker>

		<uv-popup ref="popup" mode="center" bgColor=''>
			<image class="coupon-img" @click="handleCouponTo('/pages/wallet/coupons')" :src="images.newUserCoupon">
			</image>
		</uv-popup>


		<tabBar></tabBar>
	</view>
</template>

<script>
	// 引入图片
	import imgs from '@/static/images/index.js'

	import dayjs from 'dayjs'
	import cookie from '@/utils/cookie.js'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		postUserList,
		postServiceTime,
		getWalletBalance,
	} from '@/api/artist.js'
	import {
		postServiceStatus,
		getShareUrl,
		getContactMeApi,
		postUpdateAddressApi, // 艺人地址修改
	} from '@/api/user.js'

	// 页面组件
	import MyUpData from './components/myUpData.vue'



	export default {
		name: 'my',
		components: {
			MyUpData
		},

		data() {
			return {
				images: {}, // 图片组

				pageData: {}, // 页面数据

				// 上传接口参数
				option: {
					// 上传服务器地址，需要替换为你的接口地址
					url: `${this.$baseURL}api/user/uploadImg`, // 该地址非真实路径，需替换为你项目自己的接口地址
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {},
					// 根据你接口需求自定义body参数
					formData: {}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 30,
				// 文件数量限制
				count: 2,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: false,
				// 演示用
				tabIndex: 0,
				list: [],
				show1: false,
				show2: false,
				show3: false,
				serviceStatusList: [{
					name: '休息',
					value: 1
				}, {
					name: '空闲',
					value: 2
				}, {
					name: '忙碌',
					value: 0
				}],
				xxx: '',
				title: '',
				address: '',
				latitude: '',
				longitude: '',
				radiovalue: false,
				show: false,
				hourList: [],
				hourListxxx: [],
				hourIndex: [0, 0],
				isXXX: false,
				contactInfo: '',
				isNewUser: false,
				propsTitle: '', // 地址的title
				PropsAddress: '', // 详细地址


				phoneBackDataType: '', // 客服联系方式返回状态
			}
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin']),

			/**
			 * 是否登录
			 */
			LoginStatus() {
				let str = false

				if (this.$public.getValueStatus(this.userInfo) && this.$public.getValueStatus(this.userInfo.loginToken)) {
					str = true
				}


				return str;
			},


			/**
			 * 是否显示艺人中心
			 */
			artistCenterShow() {
				let show = false

				if (this.userInfo.cityCodes !== undefined && this.userInfo.cityCodes !== null && this.userInfo.cityCodes
					.length > 0) {
					show = true
				}

				if (this.userInfo.managerId !== null) {
					show = true
				}
				return show
			},

			/**
			 * 是否显示我的地址/设置时间/设置状态
			 */
			addressShow() {
				let show = false
				if (this.userArtistVoType && this.pageData.userArtistVo.artistId !== null) {
					show = true
				}

				return show;
			},


			/**
			 * 是否显示选择地址
			 */
			chooseAddressShow() {
				let show = false

				if (this.userArtistVoType && this.pageData.userArtistVo.address) {
					show = true
				}
				return show;
			},

			/**
			 * 是否是艺人
			 */
			userArtistVoType() {
				let show = false

				if (Object.keys(this.userInfo).length > 0 && this.userInfo.userArtistVo !== null && Object.keys(this
						.userInfo.userArtistVo).length > 0 && this.userInfo.userArtistVo !== null) {
					show = true
				}
				return show;
			}

		},


		onLoad() {
			this.images = {
				...imgs
			}

			for (let i = 0; i <= 24; i++) {
				this.hourListxxx.push(`${i < 10 ? `0${i}` : i}:00`)
				// if (i !== 24) this.hourListxxx.push(`${i}: 30`)
			}
			this.hourList = [this.hourListxxx, this.hourListxxx]

			//获取客服信息
			this.getContactMe()


		},
		onReady() {
			//新用户展示新人优惠券弹窗
			this.isNewUser = cookie.get("isNewUser")
			cookie.remove("isNewUser")
			if (!this.isNewUser) {
				this.$refs.popup.close()
				return;
			}
			this.$refs.popup.open('center')
		},

		async onShow() {

			console.log(this.userInfo, '快看快看myTab');


			if (Object.keys(this.userInfo).length < 1) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}



			this.init()


			this.setTabCurrent(4)
			if (!this.isLogin) return
			await this.getUserInfo()
		},

		async onPullDownRefresh() {
			await this.getUserInfo()
			uni.stopPullDownRefresh()
			uni.showToast({
				duration: 5000,
				title: '刷新成功',
				icon: 'none'
			})
		},

		watch: {
			userinfo: {
				handler() {
					if (Object.keys(this.userInfo).length > 0) {
						console.log(this.userInfo, '11111111111111111');

						this.pageData = {
							...this.userInfo
						}

					}
				},
				deep: true,
				immediate: true
			},

			'userInfo.userArtistVo': {
				handler: function(val) {
					if (this.userInfo.userArtistVo) {
						this.propsTitle = this.$public.getValueStatus(this.userInfo.userArtistVo.address) && this
							.userInfo.userArtistVo.address.split('·')[0]


						this.PropsAddress = this.$public.getValueStatus(this.userInfo.userArtistVo.address) && this
							.userInfo.userArtistVo.address.split('·')[1]

					}
				},
				immediate: true,
				deep: true
			},

			// 设置上传文件的token
			userInfo: {
				handler() {
					if (this.userInfo.loginToken) {
						this.option.header['Authorization'] = `Bearer ${this.userInfo.loginToken}`
					}
				},
				deep: true,
				immediate: true
			}
		},
		filters: {
			statusName(val) {
				let str = ''
				switch (Number(val)) {
					case 0:
						str = '忙碌';
						break;
					case 1:
						str = '休息中';
						break;
					case 2:
						str = '空闲';
						break;
					default:
						str = '未知'
				}

				return str;
			}
		},

		// 初次进入同城组局会被拦截,设置首页离开时放开
		onHide() {
			this.setIsShow(true)
		},
		methods: {
			...mapActions(['handleLogin', 'handleWallet', 'getUserInfo', 'getCheckMethod']),
			...mapMutations(['handleExit', 'setUserInfo', 'setTabCurrent', 'setIsShow']),

			dayjs,

			/**
			 * 初始化
			 */
			init() {
				// 判断登录状态跳转页面
				this.getCheckMethod()
			},

			/**
			 * 点击复制id到粘贴板
			 */
			setAffixUserId() {
				// console.log(this.userInfo.id);
				uni.setClipboardData({
					data: String(this.userInfo.id),
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 3000,
							icon: 'none'
						});
					},
					fail: function(err) {
						console.log(err);
						uni.showToast({
							title: '复制失败',
							duration: 3000,
							icon: 'none'
						});
					}
				});
			},


			/**
			 * 获取客服信息
			 */
			async getContactMe() {
				const res = await getContactMeApi()

				if (res.data === null || res.data.contactInfo === undefined || res.data.contactInfo === null) {
					this.phoneBackDataType = true
				}

				const index = res.data.contactInfo.indexOf('@')
				this.isXXX = index !== -1
				if (this.isXXX) {
					this.contactInfo = res.data.contactInfo.slice(1, res.data.contactInfo.length)
				} else {
					this.contactInfo = res.data.contactInfo
				}
			},

			/**
			 * 刷新页面
			 */
			locationReload() {
				this.getUserInfo()
			},
			handleCertification() {
				if (this.userInfo.isCertification === 1) {
					return uni.showToast({
						duration: 5000,
						title: '您已实名认证',
						icon: 'none'
					})
				}
				const that = this
				uni.showModal({
					title: '应国家法律要求请先实名认证',
					confirmText: '立即前往',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							that.handleNavigateTo('/pages/me/certification/certification')
						} else if (res.cancel) {}
					}
				});
			},

			/**
			 * 点击联系客服
			 */
			handleCall() {
				const that = this

				// 如果等于true，客服的联系方式就没返回，这时候要提示，并且不会进行下面的操作
				if (this.phoneBackDataType) {
					uni.showToast({
						duration: 3000,
						title: '客服信息获取失败，请重试',
						icon: 'none'
					})
					return
				}


				if (!this.isXXX) {
					// this.contactInfo是电话号码
					// #ifdef H5
					location.href = `tel:${this.contactInfo}`;
					// #endif

					// #ifdef MP-WEIXIN || APP
					this.handlePhoneNumber()
					// #endif

				} else {
					uni.showModal({
						title: `微信号：${this.contactInfo}`,
						confirmText: '复制',
						cancelColor: '关闭',
						success(res) {
							if (res.confirm) {
								copyClipboard(that.contactInfo, '微信号已复制，添加微信后可联系我们')
							} else if (res.cancel) {}
						}
					});
				}
			},

			/**
			 * 打开电话号码操作面板
			 */
			handlePhoneNumber() {
				let that = this
				uni.showActionSheet({
					title: "可能是一个电话号",
					itemList: ['呼叫' + that.contactInfo, '复制号码', '添加到手机通讯录'],
					success(res) {
						console.log(res.tapIndex)

						// 呼叫
						if (res.tapIndex === 0) {
							uni.makePhoneCall({
								phoneNumber: String(that.contactInfo),
								fail: err => {
									console.log('拨打电话错误', err);
								}
							});
						}

						// 复制号码
						if (res.tapIndex === 1) {
							uni.setClipboardData({
								data: String(that.contactInfo),
								success: function() {
									uni.showToast({
										title: '复制成功',
										duration: 3000,
										icon: 'none'
									});
								},
								fail: function(err) {
									console.log(err);
									uni.showToast({
										title: '复制失败',
										duration: 3000,
										icon: 'none'
									});
								}
							});
						}

						// 添加到手机通讯录
						if (res.tapIndex === 2) {
							uni.addPhoneContact({
								firstName: String(that.contactInfo), // 名字必填项
								mobilePhoneNumber: String(that.contactInfo), // 电话号
								success: function() {
									uni.showToast({
										title: '添加成功',
										duration: 3000,
										icon: 'none'
									});
								},
								fail: function(err) {
									console.log(err);
									uni.showToast({
										title: '添加失败',
										duration: 3000,
										icon: 'none'
									});
								}
							});
						}


					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			},
			handlecccc() {
				const that = this
				uni.showModal({
					// title: '是否退出寻觅搭子？',
					title: '是否退出DD友伴？',
					success(res) {
						console.log(res, '这是啥');
						if (res.confirm) {
							that.handleExit(1)
							that.enterLogin()
						} else if (res.cancel) {}
					}
				});
			},

			/**
			 * 去login页面
			 */
			enterLogin() {
				console.log('运行了吗');
				uni.navigateTo({
					url: '/pages/login/login',
					fail(err) {
						console.log('为什么跳转失败', err);
					}
				});
			},


			//添加地址成功回调
			submitAddress(e) {
				console.log('添加调地址信息：', e)
				this.latitude = e.latitude
				this.longitude = e.longitude
				this.title = e.title
				this.address = e.address

			},
			// 地址回显(编辑)调用此方法
			editAddress() {
				let {
					longitude = '', latitude = '',
						address = ''
				} = this.userInfo
				this.show3 = true
				const addressList = address ? address.split('*/*') : []
				address = addressList.length ? addressList[1] : ''
				const title = addressList.length ? addressList[0] : ''
				let obj = {
					id: '1',
					detailAddress: '', //门牌号(详细地址)
					userName: '', //联系人姓名
					userPhone: '', //手机号
					lableName: '', //标签
					sexType: '', //性别
					title, //地址概述
					address, //详细地址
					longitude, //经度
					latitude, //纬度
					agreeState: '', //是否是默认地址
				}
				this.$nextTick(() => {
					this.title = title
					this.address = address
					this.longitude = longitude
					this.latitude = latitude

					this.$refs.liuChooseAddress.setData(obj)
				})
			},

			/**
			 * 更改状态 
			 */
			async handleSelect(val) {
				//传入服务状态
				const res = await postServiceStatus(val.value)

				if (res.code !== 200) {
					this.$public.showText(res.msg || '修改失败')
					return
				}

				this.setUserInfo({
					serviceStatus: val.value
				})

				this.show2 = false
				this.$public.showText('修改成功')

				this.locationReload()

			},
			async handleConfirm1() {
				if (!this.latitude || !this.longitude) return uni.showToast({
					duration: 5000,
					icon: 'none',
					title: '请先选择您的地址'
				})

				let str = this.address.split("市")

				// 如果名字里面有·,那就直接去掉
				let mytitle = this.title.split("·")
				let str2 = ''
				mytitle.map(res => {
					str2 = str2 + res
				})

				const address = str2 + '·' + str[str.length - 1]


				// 修改艺人地址
				const res = await postUpdateAddressApi({
					address, // 地址
					latitude: this.latitude,
					longitude: this.longitude
				})

				if (res.code !== 200) {
					this.$public.showText(res.msg || '修改地址失败')
					return
				}

				this.show3 = false
				this.$public.showText('修改成功')

				this.setUserInfo({
					address, // 地址
					latitude: this.latitude,
					longitude: this.longitude
				})
				this.title = ''
				this.address = ''
				this.latitude = ''
				this.longitude = ''

				// 刷新资料
				this.locationReload()

			},
			handleConfirm() {
				uni.showLoading({
					title: '正在处理中'
				});
				uni.showToast({
					duration: 5000,
					icon: 'none',
					title: '感谢您留下的宝贵建议，我们会积极响应'
				})
				this.xxx = ''
				this.show1 = false
				uni.hideLoading();
			},

			/**
			 * 服务时间选择
			 */
			async handleHour(e) {
				this.hourIndex = e.indexs
				const [index1, index2] = e.indexs

				// if (index1 >= index2) {
				// 	return uni.showToast({
				// 		duration: 5000,
				// 		title: '服务结束时间请大于服务开始时间',
				// 		icon: 'none'
				// 	})
				// }
				const serviceStartTime = e.value[0] + ':00'
				const serviceEndTime = e.value[1] + ':00'
				const {
					artistId: id
				} = this.userInfo

				const res = await postServiceTime({
					serviceEndTime,
					serviceStartTime
				})

				if (res.code !== 200) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title: res.msg || '请求失败'
					})
					return
				}
				this.setUserInfo({
					serviceStartTime,
					serviceEndTime
				})
				this.show = false
				uni.showToast({
					duration: 3000,
					title: '操作成功',
					icon: 'none'
				})

				this.locationReload()

			},
			handleNavigateTo(url) {
				uni.navigateTo({
					url
				})
			},

			handleCouponTo(url) {
				cookie.remove("isNewUser")
				this.$refs.popup.close()
				uni.navigateTo({
					url
				})
			},


			/**
			 * 跳转到艺人管理
			 */
			enterArtistManage() {
				uni.navigateTo({
					url: '/pages/artist/artistCentre/index'
				});
			},


			/**
			 * 跳转到修改资料
			 */
			enterEditMsg() {
				uni.navigateTo({
					url: '/pages/me/editMsg/editMsg'
				});
			},

		}
	}
</script>

<style lang="less" scoped>
	.my-box-1 {
		position: relative;
		// height: 100vh;

		.login-box {

			position: absolute;
			top: 240rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;

			.btn-login {
				width: 600rpx;
				border-radius: 20rpx;
				text-align: center;
				padding: 20rpx 0;
				background-color: rgb(88, 190, 106);
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}
		}

		.box-row {
			display: flex;
			align-items: center;
			color: #8C8A8A;
			white-space: nowrap;
		}
	}

	.my-box {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(202, 191, 192, 0) 100%);

		.my-box-t {
			width: 100%;
			height: 310rpx;
			position: relative;

			.my-box-t-userId {
				position: absolute;
				top: 36rpx;
				left: 32rpx;
				z-index: 100;
				font-size: 26rpx;
				color: #999;

				.my-box-t-userId-text2 {
					font-size: 26rpx;
					color: #333;
				}

			}

			.editMsg {
				position: absolute;
				right: 0rpx;
				top: 24rpx;
				z-index: 100;
				#font(28rpx, #fff);
				#box(160rpx, 60rpx, 30rpx 0 0 30rpx, linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
				#flex(-, center, center);
			}

			&>image {
				z-index: 1;
			}

			.box {
				position: absolute;
				display: flex;
				// margin-right: 42rpx;
				bottom: 20rpx;
				left: 0;
				box-sizing: border-box;
				padding-left: 32rpx;
				z-index: 2;
				width: 100%;



				.box-r {
					display: flex;
					flex-direction: column;
					margin-left: 42rpx;
					width: 100%;
					position: relative;


					.name {
						display: flex;
						align-items: center;
						margin-bottom: 26rpx;

						&>text {
							color: #0F0D21;
							font-size: 40rpx;
							font-weight: bold;
							margin-right: 16rpx;
						}

						.status {
							padding: 0 16rpx;
							height: 34rpx;
							line-height: 34rpx;
							color: #FDF3F3;
							font-size: 18rpx;
							border-radius: 20rpx;
							display: flex;
							align-items: center;

						}

						.status0 {
							color: #D86066;
							background: linear-gradient(90deg, #FFDCDC 0%, rgba(255, 236, 236, 0.4) 100%);
						}

						.status1 {
							// color: #929292;
							background: #E5E5E5;
						}

						.status2 {
							// color: #26605C;
							background: linear-gradient(90deg, #75BE9D 0%, rgba(204, 255, 232, 0.5) 100%, rgba(255, 255, 255, 0.5) 100%);
						}

					}

					.service-box {
						display: flex;
						align-items: center;
						margin-bottom: 34rpx;

						.main {
							display: flex;
							align-items: center;

							&>image {
								width: 32rpx;
								height: 32rpx;
							}

							&>text {
								margin-left: 8rpx;
								color: #0F0D21;
								font-size: 18rpx;
							}
						}

						&>text {
							color: #8C8A8A;
							font-size: 18rpx;
							margin-left: 20rpx;
						}
					}

					.tag-box {
						display: flex;

						text {
							color: #FDF3F3;
							font-size: 24rpx;
							padding: 0 10rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
							margin-right: 8rpx;

							&:nth-child(1) {
								background: rgba(236, 96, 111, 0.8);
							}

							&:nth-child(2) {
								background: rgba(245, 139, 41, 0.8);
							}

							&:nth-child(3) {
								background: rgba(113, 98, 234, 0.8);
								margin-right: 0;
							}
						}
					}


				}
			}

		}

		.my-box-c {
			padding: 32rpx 32rpx;
			display: flex;
			background-color: #ffffff;
			margin: 28rpx 24rpx;
			margin-top: 0;
			flex-direction: row;
			border-radius: 16rpx;
			justify-content: space-between;

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;

				&>image {
					width: 80rpx;
					height: 80rpx;
				}

				&>text {
					color: #0F0D21;
					font-size: 24rpx;
					margin-top: 16rpx;
				}
			}
		}



		// 会员卡
		.my-box-member {
			#box(-, 150rpx);
			#flex(-, center, center);
			margin: 0 52rpx;
			margin-top: 24rpx;
		}


		.my-box-b {
			padding: 16rpx 32rpx;
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			border-radius: 16rpx;
			margin: 0 24rpx;

			&::after {
				display: block;
				content: '';
				width: 100%;
				height: 204rpx;
			}

			.title {
				color: #0F0F0F;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 40rpx;
			}

			.main {
				display: flex;
				// justify-content: space-between;
				padding: 0 6rpx;
				flex-wrap: wrap;
				margin: 0 -32rpx;

				.box {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 60rpx;

					&>image {
						width: 37.32rpx;
						height: 37.32rpx;
					}

					&>text {
						color: #0F0D21;
						font-size: 24rpx;
						margin-top: 16rpx;
					}
				}
			}
		}

		.exit-box {
			position: fixed;
			bottom: 164rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 686rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			// margin: 0 auto 40rpx;
			border-radius: 40rpx;
			color: #0F0D21;
			font-size: 24rpx;
			opacity: 1;
			border: 2rpx solid rgba(0, 0, 0, 0.1);
			background-color: #fff;
		}
	}

	::v-deep .u-modal__content {
		display: flex;
		padding: 12rpx 24rpx 24rpx 24rpx;

		&>view {
			width: 100%;

		}
	}

	.color2 {
		background-color: #6087EC;
	}

	.color1 {
		background-color: #EC606F;
	}

	.color0 {
		background-color: #F58B29;
	}

	.coupon-img {
		width: 375.01px;
		height: 665.24px;
	}



	.slot-content-address {
		font-size: 28rpx;
		color: #999;
		margin: 0 24rpx;
	}
</style>

<!-- #ifdef MP-WEIXIN -->
<style>
	page {
		background: none;
	}
</style>
<!-- #endif -->